<template>
  <div class="hello">
    <el-carousel :interval="30000" arrow="always" height="150px">
      <el-carousel-item v-for="item in msg" :key="item.id">
        <img :src="item.newsCover" />
      </el-carousel-item>
    </el-carousel>
    <li
      v-show="hidden"
      class="indexList"
      v-for="(item, index) in list"
      :key="item.id"
      :class="{ active: currentIndex == index }"
      @click="btn(index, item.id)"
    >
      {{ item.classifiedsName }}
    </li>
  </div>
</template>

<script>
export default {
  props: ["msg", "list"],
  data() {
    return {
      hidden: false
    };
  },
  computed: {
    currentIndex: {
      get: function() {
        if (this.$store.state.index) {
          return this.$store.state.index;
        }
        return 0;
      },
      set: function() {}
    }
  },
  // 监听点击位置
  created() {
    if (sessionStorage.getItem("index")) {
      this.$store.commit("state_index", sessionStorage.getItem("index"));
    }
    this.currentIndex = this.$store.state.index;
  },
  mounted(){
    this.$parent.runTime = "子组件";
  },
  methods: {
    btn(index, id) {
      this.$store.commit("state_icon", 1);
      this.$store.commit("state_index", index);
      this.$router.push({
        path: "/classify",
        query: {
          id: id
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.el-carousel__button {
  width: 20px;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.el-carousel__item {
  height: 150px;
}
.el-carousel__item img {
  height: 100%;
  width: 100%;
}
.indexList {
  width: 33%;
  text-align: center;
  float: left;
  line-height: 40px;
  font-size: 15px;
  margin: 0;
}
.active {
  background: red;
}
</style>
